<template>
  <n-grid :x-gap="20" :y-gap="20" :cols="2">
    <n-grid-item>
      <n-card title="季度销售趋势图" size="medium">
        <div class="chart" id="bar"/>
      </n-card>
    </n-grid-item>
    <n-grid-item>
      <n-card title="季度销售趋势图" size="medium">
        <div class="chart" id="line"/>
      </n-card>
    </n-grid-item>
    <n-grid-item>
      <n-card title="季度销售趋势图" size="medium">
        <div class="chart" id="bubble"/>
      </n-card>
    </n-grid-item>
    <n-grid-item>
      <n-card title="季度销售趋势图" size="medium">
        <div class="chart">

        </div>
      </n-card>
    </n-grid-item>
    
  </n-grid>
  
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import bar from './options/bar';
import line from './options/line';
import bubble from './options/bubble';
import { bubbleGetApi } from '../../api/product';

onMounted(async()=>{
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('bar'));
  // 绘制图表
  myChart.setOption(bar);

  //折线图
  var lineChart = echarts.init(document.getElementById('line'));
  lineChart.setOption(line);

  //散点图
  var bubbleChart = echarts.init(document.getElementById('bubble'));
  let res = await bubbleGetApi()
  bubble.series[0].data = res.data.data[0]
  bubble.series[1].data = res.data.data[1]
  bubbleChart.setOption(bubble);
})
</script>

<style lang="scss" scoped>
.chart{
  height: 260px;
  border: 1px solid red;
}
</style>